/*
  学习目标：使用Prop.children属性- 模拟插槽
 
 
*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello></Hello>
        <Hello>我是传来的children</Hello>
        <HelloHasName>{{ title: '静夜思', content: <p>鹅鹅鹅</p> }}</HelloHasName>
        <HelloHasName>{{ title: '蜀道难', content: <p>难于上青天</p> }}</HelloHasName>
        <HelloScoped>
          {(list) => (
            <b>
              {list.map((item) => (
                <i key={item.id}>
                  {item.name} --{item.content}
                </i>
              ))}
            </b>
          )}
        </HelloScoped>
      </div>
    );
  }
}

class HelloScoped extends React.Component {
  state = {
    list: [
      { id: 1, name: 'zs', content: '狂徒' },
      { id: 2, name: 'ls', content: '狂徒2' },
      { id: 3, name: '被告', content: '狂徒3' },
    ],
  };
  // 3. children 模拟 作用域插槽
  // 🔔 借助children是函数，传递state出去，渲染结构交给父组件
  render() {
    return <div>{this.props.children(this.state.list)}</div>;
  }
}

class HelloHasName extends React.Component {
  defaultInfo = '默认消息';
  render() {
    // 2. children 具名插槽
    // 借助children传对象，对象不同的属性名，可以放上不同的内容，来区分显示
    return (
      <div>
        <h1>{this.props.children.title}</h1>
        <hr />
        <div>{this.props.children.content}</div>
      </div>
    );
  }
}

class Hello extends React.Component {
  defaultInfo = '默认消息';
  render() {
    // 1. children 模拟普通插槽-支持默认值
    // 🔔 判断children是否为空，不传则为空
    return <h1>{this.props.children ? this.props.children : this.defaultInfo}</h1>;
  }
}
